$headerHeight: 50px;
$saideWidth: 124px;

.home {
  padding-top: $headerHeight;
  &-header {
    margin: -$headerHeight 0 0 0;
    padding-left: $saideWidth;
    width: 100%;
    height: $headerHeight;
    background-color: #FFFFFF;
    &-nav {
      height: 100%;
      text-align: right;
      &>li {
        position: relative;
        top: 0;
        left: 0;
        cursor: pointer;
        color: white;
        &:hover {
          background-color: #367FAA;
        }
      }
    }
  }

  &-aside {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: $headerHeight;
    width: $saideWidth;
    height: 100%;
    background-color: white;

    a {
      display: inline-block;
      width: 100%;
      height: 100%;
      // line-height: 3;
      color: #B8C7CE;
    }

    &-title {
      position: absolute;
      top: 0;
      left: 0;
      width: $saideWidth * 2;
      height: $headerHeight;
      text-align: center;
      line-height: $headerHeight;
      background-color: #FFFFFF;
      color: #333;
      span {
        font-size: 1.2em;
      }
    }

    &-nav {
      height: 100%;
      background-color: #333A44;
      p {
        margin: 0;
      }
      a {
        position: relative;
        top: 0;
        left: 0;
        border-left: 3px solid transparent;
        border-bottom: 1px solid #979797;
        padding-top: 30px;
        width: $saideWidth;
        height: $saideWidth;
        text-align: center;
        i {
          font-size: 32px;
        }
        &:hover {
          text-decoration: none;
          background-color: #222A34;
          border-left: 3px solid #86C861;
          &::after {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            display: inline-block;
            border: 8px solid transparent;
            border-right: 8px solid #fff;
          }
        }
      }
      .active {
        text-decoration: none;
        background-color: #222A34;
        color: #FFFFFF;
        border-left: 3px solid #86C861;
        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          display: inline-block;
          border: 8px solid transparent;
          border-right: 8px solid #fff;
        }
      }
    }
  }

  &-body {
    padding: 0 0 0 $saideWidth;
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    overflow-y: auto;
  }
}
